<template>
  <div class="special">
      <top-nav title="专栏详情"></top-nav>
      <div class="content">
        <section>{{list.title}}</section>
        <div class="special-img">
            <img :src="list.pic">
        </div>
          <div class="content-p" v-html="list.content"></div>
      </div>
 </div>
</template>

<script>
import topNav from '../components/bottomNav/topNav.vue'
import { getspecial } from '../utils/api'
export default {
  components: { topNav },
  name: 'special',
  data() { 
    return {
        list:{}
    }
  },
  created() {
      getspecial(this.$route.query.id).then(res=>{
          console.log(res);
          this.list = res
      })
  },
  methods:{

  },
 }
</script>

<style lang="scss" scoped>
.special{
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.content{
    width: 100%;
    font-size: 0.30rem;
    .content-p{
        p{
        margin: 0.2rem;
        text-indent: 1rem;
        }

    }
    section{
        width: 100%;
        height: 0.8rem;
        text-align: center;
        font-size: 0.32rem;
    }
    .special-img{
        width: 100%;
        height: 4rem;
    img{
        width: 100%;
        height: 100%;
    }
    }
    
}
</style>